<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./res/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="./js/vue.js">
</head>

<body>
    <div id="app " class="flex-column">
        <div class="movie-head flex-row">
            <div class="city-icon flex-center">
                武汉
            </div>
            <div class="movie-name flex-center">
                软帝电影
            </div>
            <div class="cha-icon flex-center">
                <i class="fa fa-search"></i>
            </div>
        </div>

        <div class="movie-body">
            <div class="lun">
                <div class="slide">
                    <img src="./img/de8e3f4ad951a72537338b8f25582767.jpeg" alt="">
                </div>
                <div class="slide">
                    <img src="./img/u=104122124,3827492954&fm=253&fmt=auto&app=138&f=JPEG.webp" alt="">
                </div>
                <div class="slide">
                    <img src="./img/v2-842fd1a1c5668fcd22dcd7e9ae0bfc42_r.jpg" alt="">
                </div>
            </div>
        </div>
        <div class="movie-buy">
            <div class="movie-one flex-row">
                <div class="tupian">
                    <img src="./img/de8e3f4ad951a72537338b8f25582767.jpeg" width="100px" height="200px" alt="">
                </div>
                <div class="movie-message flex-column">
                    <div class="name">
                        <span>憨豆</span></br></br></br>
                        <span>喜剧悬疑</span></br>
                        <span>中国大陆/126分钟</span></br>
                        <span>2021-02-12 08:20中国大陆上映</span>
                    </div>

                </div>
                <div class="buy flex-column">
                    <div class="buybuy flex-column">
                        <span>8.8</span></br></br></br>
                        <span><button>购票</button></span>
                    </div>

                </div>
            </div>
            <div class="movie-one flex-row">
                <div class="tupian">
                    <img src="./img/u=104122124,3827492954&fm=253&fmt=auto&app=138&f=JPEG.webp" width="100px"
                        height="200px" alt="">
                </div>
                <div class="movie-message flex-column">
                    <div class="name">
                        <span>泰囧</span></br></br></br>
                        <span>喜剧悬疑</span></br>
                        <span>中国大陆/126分钟</span></br>
                        <span>2021-02-12 08:20中国大陆上映</span>
                    </div>

                </div>
                <div class="buy flex-column">
                    <div class="buybuy flex-column">
                        <span>8.8</span></br></br></br>
                        <span><button>购票</button></span>
                    </div>

                </div>
            </div>

        </div>

        <div class="foot flex-row">
            <div class="hellotalk">
                <i class="fa fa-star fa-2x flex-column"></i>
                <p>推荐</p>
            </div>
            <div class="classification">
                <div></div>
                <i class="fa fa-bars fa-2x flex-column"></i>
                <p>分类</p>
            </div>
            <div class="ranking">
                <i class="fa fa-list fa-2x flex-column"></i>
                <p>排行</p>
            </div>
            <div class="my">
                <i class="fa fa-user fa-2x flex-column"></i>
                <p>我的</p>
            </div>
        </div>
    </div>
</body>
<script>
    var lun = document.querySelector(".lun");
    var slides = lun.querySelectorAll(".slide");

    var slideIndex = 0; // 当前显示幻灯片的索引

    function showSlide(index) {
        // 隐藏所有幻灯片
        for (var i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }

        // 显示指定索引的幻灯片
        slides[index].style.display = "block";
    }

    function nextSlide() {
        slideIndex++;
        if (slideIndex >= slides.length) {
            slideIndex = 0;
        }
        showSlide(slideIndex);
    }

    // 设置定时器，每隔一段时间切换到下一张幻灯片
    setInterval(nextSlide, 3000);
</script>

</html>